<template>
    <UserManagement :jsonData="jsonData"></UserManagement>
</template>

<script lang='ts' setup>
import { reactive } from 'vue';
import UserManagement from './UserManagement.vue';
import { addUser, getAllUserList, getUserList, switchStatus, updateUser } from '@/api/user/user';
import { message } from 'ant-design-vue';
import { exportAllToExcel } from '@/utils/exportExcel';

//怎么设计回调函数？它的使用例子？
//答：明确设计函数的目的，要使用它做什么事情，去完成这件事情。
const userTable = {
    title: '平台用户',
    bordered: false,
    //搜索组件
    search: {
        component: 'OptionView',
    },
    //操作按钮
    actions: [
        {
            text: '新增',
            icon: 'plus',
            props: {
                type: 'primary',
            },
            click: () => {
                userTable.modal.visible = true
                userTable.modal.title = '新增用户'
                userTable.modal.initialValues = {
                    id:0,
                    account: '',
                    name: '',
                    role: '',
                    phone: '',
                    organization: '',
                    status: false
                }
                return userTable.modal
            }
        },
        {
            text: '导出',
            icon: 'download',
            click:  async () => {
                await exportAllToExcel(async () => {
                const res = await getAllUserList()
                return res.data.list
                },'用户数据',[
                {
                    key: 'id', title: 'ID'
                },
                {
                    key: 'account', title: '用户账号'
                },
                {
                    key: 'name', title: '用户姓名'
                },
                {
                    key: 'role', title: '角色名称'
                },
                {
                    key: 'phone', title: '手机号码'
                },
                {
                    key: 'organization', title: '组织名称'
                },
                ])
            }
        }
    ],
    //表格
    table: {
        resizeColumn: (w: any, col: { width: any; }) => {
            col.width = w;
        },
        onChangeTable: async (pag: any) => {
            userTable.table.pagination.current = pag.current
            userTable.table.pagination.pageSize = pag.pageSize
            const res = await getUserList({
                current: userTable.table.pagination.current,
                pageSize: userTable.table.pagination.pageSize
            })
            return res;
        },
        onChangeStatus: async (values: any) => {
            try {
                await switchStatus(values)
                message.success('切换成功')
            } catch (error) {
                message.error('切换失败')
            }
        },
        columns: [
            { title: '用户账号', dataIndex: 'account',resizable: true, key: 'account', minWidth:100, width: 200},
            { title: '用户姓名', dataIndex: 'name',resizable: true, key: 'name', minWidth:100, width: 200},
            { title: '角色名称', dataIndex: 'role', key: 'role',resizable: true, minWidth:100, width: 200 },
            { title: '手机号码', dataIndex: 'phone', key: 'phone',resizable: true, minWidth:100, width: 200 },
            { title: '组织架构', dataIndex: 'organization', key: 'organization',resizable: true, minWidth:100, width: 200},
            { title: '账号状态', dataIndex: 'status', key: 'status', minWidth:100, width: 200},
            { title: '操作', key: 'action', fixed: 'right', width:200 },
        ],
        dataSource: [],
        pagination: {
            current: 1,
            pageSize: 10,
            total: 0,
            showSizeChanger: true,
            showTotal: (total: number) => `共${total}条`
        },
        loading: false,
    },
    //模态框
    modal: {
        title: '用户表单',
        visible: false,
        formItems: [
            {type: 'input', name: 'account', label: '用户账号', rules: [{required: true, message: '请输入账号', trigger: 'blur'}]},
            {type: 'input', name: 'name', label: '用户姓名', rules: [{required: true, message: '请输入姓名', trigger: 'blur'}]},
            {type: 'select', name: 'role', label: '角色名称', props: {options: [{label: '管理员', value: '管理员'},{label: '非管理员', value: '非管理员'}]}},
            {type: 'input', name: 'phone', label: '手机号码' },
            {type: 'select', name: 'organization', label: '组织架构', props: {options: [{label: '运营部', value: '运营部'},{label: '研发部', value: '研发部'},{label: '人事部', value: '人事部'}]}},
            {type: 'switch', name: 'status', label: '账号状态', props:{checkedChildren: '开启', unCheckedChildren: '关闭'}, defaultValue: false},
        ],
        initialValues: {},
        onOk: async (values: any) => {
            if(values.id === 0){
                const { id, ...data } = values
                await addUser(data)
                message.success('新增成功')
            }else{
                await updateUser(values)
                message.success('更新成功')
            }
        },
        onCancel: () => {
            // userTable.modal.visible = false;
        }
    },
    //树形搜索组件
    treeSearch: {
        placeholder: '请输入组织架构名称',
        treeData: [
            {
                title: 'HY环境科技',
                key: '1',
                children: [
                { 
                    title: '运营部', 
                    key: '1-1',
                    children: [
                    { title: '人事部', key: '1-1-1' }
                    ] 
                },
                { title: '研发部', key: '1-2' },
                ],
            },
        ]
    }
}

const jsonData = reactive([
    {    
        index: 'tableView',
        parentCode: '001',
        uniqueId: '1',
        content: userTable
    },
    {    
        index: 'view',
        parentCode: '002',
        uniqueId: '1',
        content: {}
    }
])

</script>

<style scoped>
</style>